<template>
	<view class="content">
		<uni-product-list/>
		<uni-load-more :status="tabItem.loadingType" :renderImage="true" :productList="renderImage">
		</uni-load-more>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction" @trigger="trigger" />
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import uniProductList from '@/components/uni-product-list/uni-product-list.vue'
	export default {
		components: {
			uniLoadMore,
			empty,
			uniProductList,
			uniFab
		},
		data() {
			return {
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#A2313E',
					buttonColor: 'rgb(0,0,0)'
				},
				content: [
					{
						iconPath: "/static/icon/home.png",
						selectedIconPath: "/static/icon/home1.png",
						text: '首页',
						active: false
					},
					{
						iconPath: "/static/icon/type.png",
						selectedIconPath: "/static/icon/type1.png",
						text: '分类',
						active: false
					},
					{
						iconPath: "/static/icon/shopCart.png",
						selectedIconPath: "/static/icon/shopCart1.png",
						text: '购物车',
						active: false
					},
					{
						iconPath: "/static/icon/center.png",
						selectedIconPath: "/static/icon/center1.png",
						text: '个人中心',
						active: false
					},
				],
				renderImage: false,
				productList: [],
				tabItem: {
					loadingType: 'more'
				},
			};
		},
	    methods: {
			trigger(e) {
				switch (e.index){
					case 0:
						uni.reLaunch({
							url: '../home/index',
							animationType: 'pop-in',
							animationDuration: 200
						});
						break;
					case 1:
						uni.reLaunch({
							url: '../class/index',
						});
					case 2:
						uni.reLaunch({
							url: '../shopCart/shopCart',
						});
					case 3:
						uni.reLaunch({
							url: '../personalCenter/personalCenter',
						});
						break;
					default:
						break;
				}
			},
		    loadData(action = 'add') {
		        const data = [{
		                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
		                title: 'Apple iPhone X 256GB 深空灰色 移动联通电信4G手机',
		                originalPrice: 9999,
		                favourPrice: 8888,
		                tip: '自营'
		            },
		            {
		                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
		                title: 'Apple iPad 平板电脑 2018年新款9.7英寸',
		                originalPrice: 3499,
		                favourPrice: 3399,
		                tip: '优惠'
		            },
		            {
		                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg',
		                title: 'Apple MacBook Pro 13.3英寸笔记本电脑（2017款Core i5处理器/8GB内存/256GB硬盘 MupxT2CH/A）',
		                originalPrice: 12999,
		                favourPrice: 10688,
		                tip: '秒杀'
		            },
		            {
		                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product4.jpg',
		                title: 'Kindle Paperwhite电纸书阅读器 电子书墨水屏 6英寸wifi 黑色',
		                originalPrice: 999,
		                favourPrice: 958,
		                tip: '秒杀'
		            },
		            {
		                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product5.jpg',
		                title: '微软（Microsoft）新Surface Pro 二合一平板电脑笔记本 12.3英寸（i5 8G内存 256G存储）',
		                originalPrice: 8888,
		                favourPrice: 8288,
		                tip: '优惠'
		            },
		            {
		                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product6.jpg',
		                title: 'Apple Watch Series 3智能手表（GPS款 42毫米 深空灰色铝金属表壳 黑色运动型表带 MQL12CH/A）',
		                originalPrice: 2899,
		                favourPrice: 2799,
		                tip: '自营'
		            }
		        ];
		
		        if (action === 'refresh') {
		            this.productList = [];
		        }
		
		        data.forEach(item => {
		            this.productList.push(item);
		        });
		    }
		},
		onLoad(options){
			this.loadData();
			setTimeout(() => {
			    this.renderImage = true;
			}, 300);
			uni.showTabBar()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
	}
</style>
